<template>
    <div class="palyers">
        <div class="normal-players" v-show="fullScreen">
            <div class="background">
                <img class="bkImg" :src="currentSong.pic">
            </div>
            <div class="top">
                <div class="back" @click="goBack">
                    <i class="icon-back"></i>
                </div>
                <h1 class="title">{{currentSong.name}}</h1>
                <h2 class="subtitle">{{currentSong.singer}}</h2>
            </div>
        </div>

        <div class="bottom" >
            <div class="operators">
                <div class="i-left">
                    <img src="../assets/icon/addVolume.png" class="icon">
                </div>
                <div class="i-left">
                    <img src="../assets/icon/rewind.png" class="icon">
                </div>
                <div class="enter">
                    <img src="../assets/icon/play.png" @click="togglePlat" class="icon" v-show="!playIcon">
                    <img src="../assets/icon/pause.png" @click="togglePlat" class="icon" v-show="playIcon">
                </div>
                <div class="i-right">
                    <img src="../assets/icon/fast.png" class="icon">
                </div>
                <div class="i-right">
                    <img src="../assets/icon/downVolume.png" class="icon">
                </div>
            </div>
        </div>

        <audio ref="audioRef"></audio>
    </div>

</template>

<script>
import { useStore } from "vuex"
import {computed,watch,ref} from "vue";

export default {
    name: 'player',
    setup(){
        const audioRef = ref(null)
        const store = useStore()
        const fullScreen = computed(()=> store.state.fullScreen)
        const currentSong = computed(()=> store.getters.currentSong)
        const playing = computed(()=> store.getters.playing)
        const playIcon = computed(()=> {
            return playing.value ? true : false
        })
        console.log(currentSong)
        watch(currentSong,(newSong)=>{
            if(!newSong.id || !newSong.url){
                return
            }
            const audioEl = audioRef.value
            audioEl.url = newSong.url
            audioEl.play()
        })
        function goBack(){
            store.commit('setFullScreen',false)
        }
        function togglePlay(){
            store.commit('setPlayingState',!playing.value)
            console.log("放歌啦")
        }
        return{
            fullScreen,
            currentSong,
            audioRef,
            playIcon,
            goBack,
            togglePlay
        }
    }
}

</script>

<style scoped>
.background{

}

.bkImg{
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.icon{
    height: 50px;
    padding-left: 34px;
    float: left;
}

</style>
